<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>赛博一番赏</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
	
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html"> 首页</a></li>
        <li><a href="news.html">资讯</a></li>
        
      </ul>
    
      <ul class="nav navbar-nav navbar-right">
        <li id="logincon"><a onclick="showlogin()" class="btn ">登陆</a></li>
        <li><a onclick="showregister()">注册</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="logincon"> </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<button class="btn" onclick="showadd()"> 添加商品</button>

<div class="container" id="box">
	


</div>




<div class="container text-center" id="pages">
	<nav aria-label="...">
  <ul class="pagination text-center" id="pagecon">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
   <!--  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li class=""><a href="#">2 <span class="sr-only">(current)</span></a></li> -->
  </ul>
</nav>
</div>







<div class="container-fluid" style="background-color:#322c2c;position: fixed;left: 0;bottom: 5px;">
  
<div class="row" style="color: azure">
  <div class="col-md-4">
    <h2>两法半</h2>
    <p class="text-info">杭州两发半网络科技有限公司旗下赛博一番赏网站是一个专注于为广大模型玩具爱好者提供闲置信息发布服务的平台，为广大模型玩具爱好者提供闲置发布、新品速递、模型值得买、模型板件评测、大师作品欣赏、模型制作教程、等资讯内容。
</p>
  </div>
  <div style="float:left;width: 1px;height: 150px; background: #e5e5e5;"></div> 
  <div class="col-md-3"></div>
  <div style="float:left;width: 1px;height: 150px; background: #e5e5e5;"></div> 


  <div class="col-md-4" style="text-align:right">
    
    <h3>京ICP234234</h3>
    <p>北京xxxx子有限公为</p>
  </div>
</div>


</div>


<div class="modal fade" tabindex="-1" id="login" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">登陆系统</h4>
      </div>
      <div class="modal-body">
       



     <form>
  <div class="form-group">
    <label for="exampleInputEmail1">账号</label>
    <input type="text" class="form-control" id="account" >
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
 
  
 
</form>




      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button"   onclick="login()" class="btn btn-primary"> 登陆</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





<div class="modal fade" tabindex="-1" id="register" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">注册</h4>
      </div>
      <div class="modal-body">
       



     <form>
  <div class="form-group">
    <label for="exampleInputEmail1">账号</label>
    <input type="text" class="form-control" id="regaccount" >
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="regpassword" placeholder="Password">
  </div>
 
  
 
</form>




      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button"   onclick="register()" class="btn btn-primary">注册</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->






<div class="modal fade" tabindex="-1" id="additem" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加商品</h4>
      </div>
      <div class="modal-body">
       



     <form>
  <div class="form-group">
    <label for="exampleInputEmail1">商品名称</label>
    <input type="text" class="form-control" id="goodsName" >
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">价格</label>
    <input type="number" class="form-control" id="price" placeholder="">
  </div>


  
     <div class='form-group'>
              <label>商品图片：</label>
               <input type="file" name="goodsUrl" id="uploadImage" onchange="postdata()">
               <img src="" id="urlitem" class="img-responsive">
                <input type='hidden'  id="url">
               
            </div>  

  


  <div class="form-group">
    <label for="exampleInputPassword1">描述 </label>
    <textarea id="descibes" class="form-control" cols="3" rows="2"></textarea>
  </div>
 

  <div class="form-group">
    <label for="exampleInputPassword1">联系方式</label>
    <input type="text" class="form-control" id="phone" placeholder="">
  </div>

  
 
</form>




      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button"   onclick="addpro()" class="btn btn-primary">添加</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<script type="text/javascript">


function showlogin(){

	$("#login").modal();
}

	
function login(){



var account = $("#account").val();
var password = $("#password").val();


if (account == "" || password == "") {
	alert("请输入账号密码");
	return false;
}



$.ajax({
   type : "POST",
   url : "http://124.71.199.181:8080/siteLogin",
   dataType : "json",
   data : JSON.stringify({"username":account,"password":password}),
   contentType:"application/json;charset=utf-8",
   success : function(d) {
    console.log(d);
    if (d.code==200 && d.token != "") {

    	localStorage.setItem("token",d.token);
    	localStorage.setItem("username",d.userName);
    	localStorage.setItem("userid",d.id);
    	alert("登陆成功");
    	$("#logincon").html("欢迎您，"+localStorage.getItem("username"));
    	$("#login").modal('hide');
    	location.reload()
    }else{
      alert(d.msg);
    }
   }
});





}




function showregister(){
	$("#register").modal();
}

function register(){



var account = $("#regaccount").val();
var password = $("#regpassword").val();


if (account == "" || password == "") {
	alert("请输入账号,密码");
	return false;
}


$.ajax({
   type : "POST",
   url : "http://124.71.199.181:8080/siteRegister",
   dataType : "json",
   data : JSON.stringify({"username":account,"password":password}),
   contentType:"application/json;charset=utf-8",
   success : function(d) {
    console.log(d);
    if (d.code==200) {

    	
    	alert("注册成功");
    	
    	$("#register").modal('hide');
    }else{
    	alert(d.msg);
    }
   }
});
}


function addpro(){



var goodsname = $("#goodsName").val();
var price = $("#price").val();

var url = $("#url").val();

var des = $("#descibe").val();

var phone = $("#phone").val();

var userid = localStorage.getItem("userid");





if (goodsname == "" || price == "" || url == ""|des == ""|phone == "") {
	alert("请填写全部信息");
	return false;
}




$.ajax({
   type : "POST",
   url : "http://124.71.199.181:8080/web/sitegoods/add",
   headers: {
        Authorization: localStorage.getItem("token")
    },
   dataType : "json",
   data : JSON.stringify({"goodsName":goodsname,"price":price,"goodsUrl":url,"descibes":des,"phone":phone,"userId":userid}),
   contentType:"application/json;charset=utf-8",
   success : function(d) {
    console.log(d);
    if (d.code==200) {

    	
    	alert("成功");
    	
    }else{
    	alert(d.msg);
    }
   }
});





}


function showadd(){
	$("#additem").modal();
}


function loadpage(page,size){


	$.ajax({
   type : "GET",
   url : "http://124.71.199.181:8080/web/sitegoods/list",
   headers: {
        Authorization: localStorage.getItem("token")
    },
   dataType : "json",
   data : {"pageNum":page,"pageSize":size},
   contentType:"application/x-www-form-urlencoded;charset=utf-8",
   success : function(d) {
    console.log(d);
    if (d.code==200) {

    	var con = "";
    	var listcon = {};
    	$.each(d.rows,function(k,v){
    		console.log(v);

    		con+=`<div class="col-sm-6 col-md-3" onclick="lookinfo(`+v.id+`)">
    <div class="thumbnail">
     <div style="background:pink;height:30px;width:100%;font-size:20px" class='text-danger'><span class='glyphicon glyphicon-yen'></span>`+v.price+`</div>
      <img src="`+v.goodsUrl+`" alt="...">
      <div class="caption">
        <h3>`+v.goodsName+`</h3>
       
       <img class='img-responsive img-circle' style="width:20px;float:left" src=`+v.userAvatar+`><p>`+v.userName+`</p>
      </div>
    </div>
  </div>`;

  listcon[v.id] = v;


    	});

    	$("#box").html(con);
    	getpagedom(d.total,size);
    	localStorage.setItem("list",JSON.stringify(listcon));

    	//page
//     	 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
// <li class=""><a href="#">2 <span class="sr-only">(current)</span></a></li>






    }
   }
});
}

function getpagedom(total,size){

	var nums = Math.ceil(total/size);

	var conpage = "";
	for (var i = 1; i <= nums; i++) {
			conpage+=`<li class=""><a href="javascript:void(0);" onclick='loadpage(`+i+`,`+size+`)'>`+i+` </a></li>`;
	}
	console.log(conpage)

	$("#pagecon").html(conpage);


}
function lookinfo(id){

var list = localStorage.getItem("list");
var con   = JSON.parse(list);
var selectinfo = con[id];

	

	var coninfo = `<div class="row">
	<div class="col-md-4">
		<img class="img-responsive" src="`+selectinfo.goodsUrl+`">
	</div>
	<div class="col-md-8">
		
		<h3>`+selectinfo.goodsName+`</h3>
		<img src="`+selectinfo.userAvatar+`" class="img-responsive img-circle pull-left" style="height: 20px;width: 20px;">`+selectinfo.userName+` <br>

		<p> 发布时间：`+selectinfo.createTime+`</p>
		<p>出让价格： `+selectinfo.price+`</p>
		<p>联系方式 `+selectinfo.phone+`</p>
		<h3>商品描述</h3>
		<p>`+selectinfo.descibes+`</p>
	</div>
</div>
`;
$("#pages").remove();
$("#box").html(coninfo);


}

loadpage(1,8);
console.log(localStorage.getItem("token"));
if (localStorage.getItem("token") == null) {
	alert("请先登录");
}else{


$("#logincon").html("<a href='http://124.71.199.181:8080/siteQuit'>"+localStorage.getItem("username")+"&nbsp&nbsp&nbsp&nbsp 退出</a>");
}
</script>

<script type="text/javascript">

function postdata(){

var formData = new FormData();
      formData.append("multipartFile", $("#uploadImage")[0].files[0]);
      $.ajax({
        url: "http://124.71.199.181:8080/web/sitegoods/uploadImage",
        type: "post",
        headers: {
        Authorization: localStorage.getItem("token")
    },
        data: formData,
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        dataType: 'text',
        success: function(data) {
          var params = JSON.parse(data)


          console.log(params);
          $("#urlitem").attr("src",params.url);
         $("#url").val(params.url);
        },
        error: function(data) {
          
        }
      });



}


</script>

</body>
</html>